<!-- 3D旋转按钮 -->
<template>
       <div class="btn">
            <button >
                <span>
                    {{ $props.title }}
                </span>
                
            </button>
         </div>
</template>

<script lang="ts" name="ThreeDReversalButton">
export default {
    props: {
        title: {
            type: String,
            default: ''
        }
    },
}  
</script>

<style lang="less" scoped>
.btn{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-height: 200px;
    button{
        padding: 4vw 8vw;
        border: none;
        border-radius: 50vw;
        background-color:rgb(86, 170, 254) ;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1vw;
        cursor: pointer;
        position: relative;
        transform-style: preserve-3d;
        transition: ease-in-out 2s;
        animation: tra 4s linear infinite;
    }
    button:hover{
        animation: none; /* 移除动画 */  
        // background-color: darkblue; /* 示例：改变背景颜色 */  
        transform: scale(1); /* 示例：保持原始大小 */  
    }
    button::before,
    button::after{
        content: "";
        border: 0.8vw solid rgb(40, 142, 245);
        border-radius: 50vw;
        position: absolute;
        top: 1vw;
        left: 1vw;
        right: 1vw;
        bottom: 1vw;
        transform-style: preserve-3d;
        transform: perspective(100vw) translateZ(10px);
        animation: traBefore 4s linear infinite;
    }
    button::after{
        transform: perspective(100vw) translateZ(-10px);
        animation: traAfter 4s linear infinite;
    }
    @keyframes tra {
        100%{
            transform:  rotatex(360deg);
        }
        
    }
    @keyframes traBefore {
        100%{
            transform: perspective(100vw) translateZ(-18px);
        }
        
    }
    @keyframes traAfter{
        100%{
            transform: perspective(100vw) translateZ(18px);
        }
        
    }

    @keyframes change {
                0%{
                    transform:  scale(1);
                }
                33%{
                    transform:  scale(1.1);
                }
                66%{
                    transform:  scale(0.9);
                }
                100%{
                    transform:  scale(1);
                }
                
            }

}
</style>
